<template>
    <h3>记录成绩</h3>
    <div class="opt">
        <el-input v-model="input" style="width: 240px" placeholder="输入需要查询的用户名" />
        <button class="btn" @click="inquire">查询</button>
    </div>
    <div class="opt">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="user" label="用户名" width="100" />
            <el-table-column prop="exam" label="试卷" />
            <el-table-column prop="total" label="总分" />
            <el-table-column prop="score" label="得分" />
            <el-table-column prop="level" label="等级" />
            <el-table-column prop="time" label="完成时间" />
            <el-table-column prop="date" label="日期" />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '../../api/http'
let input = ref('')
const tableData = ref<any>([])
type Item = {
    id: string
    user: string
    exam: string
    total: string
    score: string
    level: string
    time: string
    date: string
}
const inquire = async () => {
    let user = input.value
    // console.log(user);
    if (user) {
        // console.log(user);
        await api.user_score({ user })
            .then(
                content => {
                    console.log(content);
                    let { code, result, msg } = content
                    if (code == 200) {
                        let arr = result.map((item: Item) => {
                            return item
                        })
                        tableData.value = arr
                        ElMessage.success(msg)
                        // console.log(tableData.value);
                    } else if (code == -1) {
                        ElMessage.error(msg)
                    }
                }
            )

    } else {
        ElMessage.error('缺少参数')
    }
}
const handleDelete = (index: number, row: any) => {
    // console.log(row);
    let { id } = row
    ElMessageBox.confirm(
        `是否删除这个“${id}”考试成绩?`,
        'Confirm',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(async () => {
        await api.score_remove({ id })
            .then(
                content => {
                    let { code, msg } = content;
                    if (code != 200) {
                        ElMessage.error(msg)
                    }
                    if (code == 200) {
                        ElMessage.success(msg)
                    }
                }
            )
        tableData.value.splice(index, 1)
    })

}
</script>

<style lang="scss">
.opt {
    margin-top: 15px;
}
</style>